<template>
  <!-- 个人笔记 -->
  <div>
    <!-- 头部 -->
    <div class="headerbox">
      <div class="header">
        <div class="left">
          <span @click="fun1()">&lt;</span>
          <img src="mayingshuang/imgs/women.jpg" alt="" />
          <p>兔子</p>
        </div>
        <div class="right">
          <p>关注</p>
          <span class="iconfont icon-fenxiang"></span>
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <img src="mayingshuang/imgs/qinglongsi.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img src="mayingshuang/imgs/qinglongsi2.jpg" alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- 文字 -->
    <div class="txtbox">
      <div class="txt">
        <div class="traffic">
          <p>交通：</p>
          <p>
            三号线青龙寺站出来步行五分钟就到遗址公园东门 进门步行十分钟左右
            不需要预约，需要核算证明
          </p>
        </div>
        <div class="survey">
          <p>概况：</p>
          <p>
            一楼一个青龙寺复原沙盘，看着挺好看的，然后走楼梯往上都是些我看不懂的东西（大雾），有个离谱的是，仿古建筑的无障碍坡道扶手用的不锈钢，有点不伦不类。
          </p>
          <p style="margin-top: 5.333vw">
            打分
            <img src="mayingshuang/imgs/star.jpg" alt="" />
            <img src="mayingshuang/imgs/star.jpg" alt="" />
            <img src="mayingshuang/imgs/star.jpg" alt="" />
            <img src="mayingshuang/imgs/star.jpg" alt="" />
            <img src="mayingshuang/imgs/star.jpg" alt="" />
          </p>
        </div>
      </div>
    </div>
    <!-- 青龙寺 -->
    <div class="qinglongbox">
      <div class="qinglong">
        <div class="left">
          <img src="mayingshuang/imgs/qinglongsi.jpg" alt="" />
        </div>
        <div class="right">
          <h5>青龙寺博物馆</h5>

          <div class="main-star">
            <div class="main-light">
              <img src="mayingshuang/imgs/star.jpg" alt />
            </div>
            <div class="main-light">
              <img src="mayingshuang/imgs/star.jpg" alt />
            </div>
            <div class="main-light">
              <img src="mayingshuang/imgs/star.jpg" alt />
            </div>
            <div class="main-light">
              <img src="mayingshuang/imgs/star.jpg" alt />
            </div>
            <div class="main-light">
              <img src="mayingshuang/imgs/star.jpg" alt />
            </div>
            <div class="main-score">4.9</div>
            <div class="main-details">免费景点</div>
            <div class="main-num">
              <span class="iconfont icon-xingxing"></span> 3472
            </div>
            <div></div>
          </div>

          <p class="do">雁塔区 交大东校区/理工大 博物馆 10.5km</p>
        </div>
      </div>
    </div>
    <!-- 投诉 -->
    <div class="complaintbox">
      <div class="complaint">
        <p>发布于 9月27日 22:51</p>
        <p><span class="iconfont icon-gantanhaozhong"></span> 投诉</p>
      </div>
    </div>
    <!-- 灰色条 -->
    <div class="grey"></div>

    <!-- 评论开始 -->
    <div class="commentbox">
      <div class="comment">
        <h3>评论</h3>
        <div class="up">
          <div class="le"></div>
          <input type="text" placeholder="请说点什么吧~" class="inputs" />
        </div>
        <div class="down">
          <img src="mayingshuang/imgs/snowman.jpg" alt="" />
          <p>随缘回复和po主蕉个朋友</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footerbox">
      <div class="footer">
        <input type="text" placeholder="请说点什么吧~" class="input" />
        <span class="iconfont icon-dianzan">1</span>
        <span class="iconfont icon-xingxing"></span>
        <span class="iconfont icon-pingjia"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun1() {
      this.$router.go(-1);
    },
  },
};
</script>

<style  lang="scss" scoped>
.headerbox {
  width: 100%;
  margin-top: 2.667vw;
  position: sticky;
  top: 0vw;
  z-index: 99;
  background-color: white;
  .header {
    width: 91.733vw;
    margin: auto;
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      line-height: 9.6vw;
      width: 41.867vw;
      justify-content: space-around;
      img {
        width: 9.6vw;
        height: 9.6vw;
        border-radius: 50%;
      }
    }
    .right {
      width: 25.067vw;
      justify-content: space-between;
      display: flex;
      line-height: 9.6vw;
      p {
        width: 15.467vw;
        height: 6.933vw;
        border: 0.267vw solid #f87449;
        text-align: center;
        line-height: 6.933vw;
        border-radius: 3.467vw;
      }
      .iconfont {
        font-size: 8vw;
        margin-top: -1.067vw;
      }
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  width: 100%;
  margin-top: 2.667vw;
  font-size: 5.333vw;
  text-align: center;
  img {
    width: 100%;
    height: 68vw;
  }
}
.txtbox {
  width: 100%;
  .txt {
    width: 91.733vw;
    line-height: 6.4vw;
    margin-top: 4vw;
    font-size: 3.467vw;
    margin: auto;
    img {
      width: 3.2vw;
      height: 3.2vw;
    }
  }
}
.qinglongbox {
  width: 100%;
  margin-top: 3.2vw;
  .qinglong {
    width: 91.733vw;
    height: 22.4vw;
    margin: auto;
    border-radius: 3.2vw;
    border: 0.107vw solid #f4f4f4;
    box-shadow: #f4f4f4 0vw 0vw 0.267vw 1p;
    display: flex;
    justify-content: space-around;
    .left {
      margin-top: 3.2vw;
      img {
        width: 17.333vw;
        height: 16.533vw;
      }
    }
    .right {
      margin-top: 3.2vw;
      line-height: 7.2vw;
      .do {
        font-size: 3.733vw;
        color: #9b9b9b;
      }
      .main-star {
        display: flex;
        height: 4.267vw;
        font-size: 3.467vw;
        line-height: 4.267vw;
        .main-light {
          width: 4.267vw;
          height: 4.267vw;
          color: #f63;
          img {
            width: 3.733vw;
            height: 4.267vw;
          }
        }
        .main-score {
          color: #ff6633;
          font-weight: bolder;
        }
        .main-details,
        .main-num {
          margin-right: 3.2vw;
          margin-left: 3.2vw;
          position: relative;
          img {
            width: 1.6vw;
            height: 3vw;
            position: absolute;
            right: -3vw;
            bottom: 0.55vw;
          }
        }
      }
    }
  }
}
.complaintbox {
  width: 100%;
  margin-top: 5.333vw;

  .complaint {
    width: 91.733vw;
    margin: auto;
    display: flex;
    font-size: 2.667vw;
    justify-content: space-between;
    color: #9b9b9b;
  }
}

.grey {
  width: 100%;
  height: 1.333vw;
  background-color: #f6f6f6;
  // margin-top: 5.6vw;
}
.footerbox {
  width: 100%;
  position: sticky;
  bottom: 0.533vw;
  .footer {
    margin: auto;
    width: 91.733vw;
    height: 13.867vw;
    display: flex;
    justify-content: space-around;
    line-height: 13.867vw;
    background-color: white;
    .input {
      width: 51.733vw;
      background-color: #f4f4f4;
      border-radius: 5.333vw;
      height: 9.333vw;
      text-align: left;
      margin-top: 1.6vw;
      border: none;
    }
    span {
      font-size: 5.333vw;
    }
  }
}
.commentbox {
  width: 100%;
  // background-color: red;
  margin-top: 4vw;
  .comment {
    width: 91.733vw;
    margin: auto;
    .up {
      display: flex;
      margin-top: 1.6vw;
      margin-top: 2.667vw;
      .le {
        width: 6.667vw;
        height: 6.667vw;
        border-radius: 5.333vw;
        background-color: #f4f4f4;
      }
      .inputs {
        width: 82.667vw;
        background-color: #f4f4f4;
        border-radius: 5.333vw;
        height: 6.667vw;
        text-align: left;
        border: none;
        margin-left: 1.333vw;
      }
    }
    .down {
      position: relative;
      p {
        text-align: center;
        position: absolute;
        top: 42.667vw;
        left: 26.4vw;
        font-size: 3.467vw;
        color: #807e7f;
      }
    }
    img {
      width: 53.333vw;
      height: 53.333vw;
      margin-left: 19.733vw;
    }
  }
}
</style>